<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页-支出明细</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/reg_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="css/ljq.css" />
		<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/ljq-post.css" />
		<style>
			.beijing {
				width: 100%;
				padding-top: 0.2rem;
			}
			
			.shuju1 {
				background: #fff;
				border-radius: 5px;
				box-shadow: 1px 1px 1px rgba(65, 152, 255, 0.2);
				width: 90%;
				padding-top: 0.15rem;
				padding-bottom: 0.15rem;
				position: absolute;
				top: 1.13rem;
				left: 5%;
				text-align: center;
			}
			
			.time {
				margin-top: 0!important;
			}
			
			.shuju1 .zhichuleixing {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 0.16rem;
				color: #4D4D4D;
				margin-top: 0.25rem;
				height: 0.17rem;
				line-height: 0.17rem;
			}
			
			.shuju1 .zhichujine {
				display: block;
				width: 100%;
				text-align: center;
				margin-top: 0.2rem;
				font-size: 0.31rem;
				color: #FF6648;
				height: 0.31rem;
				line-height: 0.31rem;
			}
			
			.shuju2 {
				width: 90%;
				margin: 0 auto;
				padding-top: 2.6rem;
				padding-left:0;
			}
			
			.shuju2_div {
				height: 0.64rem;
				border-bottom: 1px solid #eee;
			}
			
			.shuju2_div:first-child {}
			
			.shuju2_div .leixin {
				display: block;
				width: 100%;
				font-size: 0.14rem;
				color: #4D4D4D;
				margin-top: 0.1rem;
				margin-bottom: 0.1rem;
			}
			
			.shuju2_div div {
				width: 100%;
			}
			
			.shuju2_div span {
				float: left;
				font-size: 0.12rem;
				color: #ccc;
			}
			
			.shuju2_div em {
				float: right;
				font-size: 0.14rem;
				color: #4D4D4D;
			}
			
			.yes {
				display: block;
				width: 85%;
				margin: 0 auto;
				text-align: center;
				background: #4198FF;
				height: 0.44rem;
				line-height: 0.44rem;
				font-size: 0.14rem;
				color: #fff;
				margin-top: 1rem;
				border-radius: 5px;
			}
			
			.tupian {
				width: 100%;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 999;
			}
			
			.lan {
				width: 100%;
				height: 1.83rem;
				background: url(img/beijing.png)no-repeat center center;
			}
			
			.bai {
				width: 100%;
				height: 0.7rem;
				background: #fff;
			}
			
			.search {
				width: 95%;
				margin: 0 auto;
				height: 0.28rem;
				margin-top: 0.35rem;
				border-radius: 6px;
				background: url(img/search_banner.png)no-repeat center center!important;
				position: relative;
			}
			
			input[type=search] {
				background: url(img/sousuo.png)no-repeat center left!important;
				background-size: 0.15rem!important;
				margin-left: 0.15rem!important;
				text-indent: 0.15rem;
				text-align: left;
				color: #fff;
				opacity: 0.6;
			}
			
			.search em {
				position: absolute;
				top: 0.065rem;
				right: 0.15rem;
				width: 0.14rem;
				height: 0.14rem;
				background: url(img/clear.png)no-repeat center center;
				background-size: 0.14rem;
				opacity: 0.5;
			}
			
			input::-webkit-input-placeholder {
				color: #fff;
				text-align: left;
				opacity: 0.6;
			}
			
			input::-moz-placeholder {
				color: #fff;
				text-align: left;
				opacity: 0.6;
			}
			
			input:-ms-input-placeholder {
				color: #fff;
				text-align: left;
				opacity: 0.6;
			}
			
			.mui-content .zong .em4 {
				width: 1.8rem!important;
			}
		</style>
	</head>

	<body>
		<div class="main0">
			<div class="tupian">
				<div class="lan">
					<div class="head2">
						<em class="mui-action-back"><img class="img1" src="img/fanhui1.png" alt="" /></em>
						<div class="div2"><span class="span3">支出明细</span></div>
						<img class="img2 tiao_shaixuan" src="img/shaixuan.png" alt="" />
					</div>
					<div class="beijing">
						<div class="search">
							<input id="key_search" onclick="fun_key_search();" type="search" class="tiao_sousuo" placeholder="请输入事由">
							<em style="display: none;"></em>
						</div>
					</div>
				</div>
				<div class="shuju1">
					<div class="time clearfix">
						<em onclick="databian('jie');" id="index-date-left" class=" mui-icon mui-icon-back a2"></em>
						<span onclick="btn_date_show();" id="index-date-show"></span>
						<em onclick="databian('jia');" id="index-date-right" class=" mui-icon mui-icon-forward a2"></em>
					</div>
					<span class="zhichuleixing" id="zongprice">总支出</span>
					<em class="zhichujine" id='zongprice_num'></em>
				</div>
				<div class="bai"></div>
			</div>

			<div class="mui-content">
				<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="border:0px solid palevioletred;">
					<div class="mui-scroll" style="border:0px solid #0000CC;">
						<ul class="shuju2" id="box_zhifumingxi1_list">

						</ul>
					</div>
				</div>
				<!--<div class="shuju2" id="box_zhifumingxi1_list">
					
				</div>-->
			</div>
		</div>

		<!--
            	作者：offline
            	时间：2017-12-29
            	描述：筛选
            -->
		<div class="shaixuan" style="display: none;">
			<header class="mui-bar mui-bar-nav head1">
				<img class="img1 tiao_main0" src="img/fanhui.png" alt="" />
				<div class="div1"><span class="span0">筛选</span></div>
			</header>
			<div class="mui-content">
				<div class="zong">
					<div class="div4 clearfix">
						<span class="span4">选择时间</span>
						<!-- id="em4_time" data-options='{"type":"date","beginYear":1949,"endYear":3016}'-->
						<em class="em4 em4_time" id="em4_time" onclick="btn_date_show_before();"></em>
					</div>
					<div class="div4 clearfix">
						<span class="span4">费用类别</span>
						<em class="em4 em4_time" id="type_name" onclick="xtype_picker();">全部</em>
						<input id="type_name_id" type="hidden" value="">
					</div>
				</div>
				<span class="yes jianbian3_shengse" onclick="chuanzhi()">确定</span>
			</div>
		</div>

		<!--/********************日期控件**************************/-->
		<!--<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<script src="js/hgs-date.js"></script>-->
		<!--/********************日期控件**************************/-->
		<input id="index-shop-lists-id" type="hidden">
		<input id="index-shop-lists" type="hidden">
		<input id='index-end-date' type="hidden" />
		<input id='index-start-date' type="hidden" />

		<!--/***************************************************/-->

		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<!--<script type="text/javascript" src="js/jsencrypt.min.js"></script>
		<script src="js/md5.js"></script>-->
		<script src="js/mui.picker.min.js"></script>
		<script src="js/crypto-js.js"></script>
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/fuction.js"></script>
		<script src="js/echarts.js"></script>
		<script src="js/hgs-date.js"></script>
		<script type="text/javascript">
			mui.init();
		</script>
		<script>
			var xout = 0;
			var count = 0;
			var pagenum = 10;
			var totalnum = 20;
			var pagesize = Math.floor(totalnum / pagenum);

			$(document).ready(function() {
				$(".tiao_shaixuan").click(function() {
					$(".main0").hide();
					$(".shaixuan").show();
				})
				$(".tiao_main0").click(function() {
					$(".shaixuan").hide();
					$(".main0").show();
				})

				$('.search input').click(function() {
					$('.search em').show();
				})
				$(".search em").click(function() {
					$(".search input").val('');
					//获取订单明细或订单流水
					fun_pos_output();
				});

			})

			mui.ready(function() {
				//获取当前的客户数据
				xminereadyload();

				//获取当天的日期	
				var xtoday = GetDateStr(0);
				mui("#index-start-date")[0].value = xtoday;
				mui("#index-end-date")[0].value = xtoday;
				mui("#index-date-show")[0].innerHTML = xtoday;
				mui("#em4_time")[0].innerHTML = xtoday;
				user_info.look_start_date = xtoday;
				user_info.look_end_date = xtoday;

				//获取店铺信息-获取支出明细
				//fun_pos_output();
				user_info.zcmx_type = mui("#type_name_id")[0].value;
				user_info.zcmx_search = '';
			});

			//变化日期的加减
			function databian(jiajie) {
				new_databian(jiajie, "#index-date-show"); //--------------------------------------------------->>>>>>>有日期选择的页面可以要
				//获取店铺信息-获取支出明细
				fun_pos_output(); //--------------------------------------------------->>>>>>>其他页面换方法
				
				mui("#em4_time")[0].innerHTML = mui("#index-date-show")[0].innerHTML ;
			}

			//打开日历界面
			function btn_date_show_before() {
				btn_date_show();

			}

			/********************日期控件**************************/
			//打开日历界面
			function btn_date_show() {
				$("#date_mbanner").show();
			}

			//确定选择日期
			function btn_date_submit() {
				judge_date_input();

				//获取店铺信息-获取支出明细
				fun_pos_output();
			}
			/********************日期控件**************************/

			//获取店铺信息-获取支出明细
			function fun_pos_output() {
				xout = 0;
				count = 0;
				pagenum = 10;
				totalnum = 50;
				pagesize = Math.floor(totalnum / pagenum);

				user_info.zcmx_type = mui("#type_name_id")[0].value;

				$("#box_zhifumingxi1_list").html("");
				mui('#pullrefresh').pullRefresh().refresh(true);
				pullupRefresh();
			}

			//获取店铺信息-获取支出明细
			function pos_output(xpage, xlimit) {
				var xbx = {}; //登录后的参数对象AES加密
				xbx.shop_id = user_info.look_shop_id; //店铺ID
				xbx.type = user_info.zcmx_type;
				xbx.add_start_date = '';
				xbx.add_end_date = '';
				xbx.input_start_date = user_info.look_start_date;
				xbx.input_end_date = user_info.look_end_date;
				xbx.search = user_info.zcmx_search;
				xbx.page = xpage;
				xbx.limit = xlimit;
				//console.log(xbx);
				official_login_after(url_host + 'pos/output', xbx, 'pos_output');
			};

			//获取全部的个人或是订单号
			function fun_key_search() {
				xout = 1;
				count = 0;
				pagenum = 10;
				totalnum = 50;
				pagesize = Math.floor(totalnum / pagenum);

				user_info.zcmx_search = mui("#key_search")[0].value;

				$("#box_zhifumingxi1_list").html("");
				mui('#pullrefresh').pullRefresh().refresh(true);
				pullupRefresh();
			}

			//获取全部的个人或是订单号
			function key_search(xpage, xlimit) {
				var xbx = {}; //登录后的参数对象AES加密
				xbx.shop_id = user_info.look_shop_id; //店铺ID
				xbx.type = user_info.zcmx_type;
				xbx.add_start_date = '';
				xbx.add_end_date = '';
				xbx.input_start_date = user_info.look_start_date;
				xbx.input_end_date = user_info.look_end_date;
				xbx.search = user_info.zcmx_search;
				xbx.page = xpage;
				xbx.limit = xlimit;
				//console.log(xbx);
				official_login_after(url_host + 'pos/output', xbx, 'pos_output');
			}

			/********************多项选择的控件**************************/
			//打开类别的弹窗
			function xtype() {
				$(".dibutanchu").show();
			}

			//确定选择类别
			function btn_type_submit() {
				judge_type_input();

				mui("#index-type")[0].innerHTML = mui("#box-ljq-tab")[0].innerHTML;
				//获取店铺信息-获取销售时段分析
				fun_pos_output();
			}
			/********************日期控件**************************/

			//类别全部
			function xtype_picker() {
				var picker = new mui.PopPicker();
				var position_json = [{
					value: "",
					text: '全部'
				}, {
					value: 1,
					text: '店租'
				}, {
					value: 2,
					text: '薪资'
				}, {
					value: 3,
					text: '采购'
				}, {
					value: 4,
					text: '税费'
				}, {
					value: 5,
					text: '水费'
				}, {
					value: 6,
					text: '电费'
				}, {
					value: 7,
					text: '其它'
				}];
				//console.log(position_json);
				picker.setData(position_json);
				picker.show(function(SelectedItem) {
					mui("#type_name")[0].innerHTML = SelectedItem[0].text;
					mui("#type_name_id")[0].value = SelectedItem[0].value;
				})
			}


			//筛选的确定按钮
			function chuanzhi() {

				//var tmpdate = mui("#em4_time")[0].innerHTML;
				//mui("#index-start-date")[0].value = tmpdate;
				//mui("#index-end-date")[0].value = tmpdate;
				//user_info.look_start_date = tmpdate;
				//user_info.look_end_date = tmpdate;

				//
				var type_name = mui("#type_name")[0].innerHTML;	
				(type_name=='全部')?type_name="总支出":type_name=type_name;
				mui("#zongprice")[0].innerHTML = type_name;

				var type_name_id = mui("#type_name_id")[0].value;

				//
				$(".main0").show();
				$(".shaixuan").hide();

				//获取店铺信息-获取销售时段分析
				fun_pos_output();
			}
		</script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pagesize)); //参数为true代表没有更多数据了。

					if(xout == 0) {
						pos_output(count, pagenum);
					} else {
						key_search(count, pagenum);
					}

				}, 800);
			}
			if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			$(function() {
				//mui触屏点击
				$("#pullrefresh").on('tap', 'li', function(event) {
					var url = $(this).attr("data-url");
					location.href = url;
				});
			});
		</script>

	</body>

</html>